<template>
  <div>
    <n-modal
      v-model:show="showModal"
      :mask-closable="false"
      :show-icon="false"
      preset="dialog"
      transform-origin="center"
      title="选择技师"
      :style="{
        width: dialogWidth,
      }"
    >
      <n-spin :show="loading" description="请稍候...">
        <BasicTable  ref="actionRef" :openChecked="true" :columns="columns" :request="loadDataTable" :row-key="(row) => row.id+'-'+row.nickname" :scroll-x="scrollX" :resizeHeightOffset="-10000" :checked-row-keys="checkedInfos" @update:checked-row-keys="handleOnCheckedRow"></BasicTable>
      </n-spin>
      <template #action>
        <n-space>
          <n-button @click="closeForm">
            取消
          </n-button>
          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">
            确定
          </n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import {computed, h, ref} from 'vue';
import {adaModalWidth, adaTableScrollX, getOptionLabel, getOptionTag} from "@/utils/hotgo";
import {BasicTable} from "@/components/Table";
import {NTag, useDialog, useMessage} from "naive-ui";
import {isNullObject} from "@/utils/is";
import {options} from "@/views/spaOrder/model";
import {OrderTechnician} from "@/api/spaOrder";

const dialog = useDialog();
const message = useMessage();
  const emit = defineEmits(['reloadTechnician']);
  const loading = ref(false);
const formBtnLoading = ref(false);
  const showModal = ref(false);
  const dialogWidth = computed(() => {
    return adaModalWidth(1040);
  });
const actionRef = ref();
const searchFormRef = ref<any>({});
const spaOrderId = ref(0);
const checkedInfos = ref([]);
const orderSelectNum = ref(0);

// 表格列
const columns = [
  {
    type: 'selection',
    disabled(row) {
      return row.workStatusEnum == 1 || row.workStatusEnum == 2
    }
  },
  {
    title: '昵称',
    key: 'nickname',
    align: 'left',
    width: 150
  },
  {
    title: '姓名',
    key: 'name',
    align: 'left',
    width: 150,
  },
  {
    title: '手机',
    key: 'phone',
    align: 'left',
    width: 200,
    render(row){
      return row.phoneArea + row.phone
    }
  },
  {
    title: '工作状态',
    key: 'workStatus',
    align: 'left',
    width: 80,
    render(row) {
      if (isNullObject(row.workStatus)) {
        return ``;
      }
      if(row.workStatusEnum == 3){
        // 可预订
        return h(
          NTag,
          {
            style: {
              marginRight: '6px',
            },
            type: 'success',
            bordered: false,
          },
          {
            default: () => '可预约',
          }
        );
      }else if(row.workStatusEnum == 2){
        // 工作中
        return h(
          NTag,
          {
            style: {
              marginRight: '6px',
            },
            type: 'warning',
            bordered: false,
          },
          {
            default: () => '工作中',
          }
        );
      }else{
        // 休息
        return h(
          NTag,
          {
            style: {
              marginRight: '6px',
            },
            type: 'default',
            bordered: false,
          },
          {
            default: () => '休假中',
          }
        );
      }
    },
  },
];

  const scrollX = computed(() => {
    return adaTableScrollX(columns, 0);
  });

    // 加载表格数据
    const loadDataTable = async (res) => {
      res.id = spaOrderId.value;
      return await OrderTechnician({ ...searchFormRef.value?.formModel, ...res });
    };

  function openModal(orderId, selectNum, technicianInfos) {
    spaOrderId.value = orderId;
    orderSelectNum.value = selectNum;
    if(technicianInfos){
      checkedInfos.value = technicianInfos.split(',')
    }else{
      checkedInfos.value = []
    }
    showModal.value = true;
  }

// 更新选中的行
function handleOnCheckedRow(rowKeys) {
  checkedInfos.value = rowKeys;
}

function confirmForm() {
  formBtnLoading.value = true;
  if(orderSelectNum.value !=  checkedInfos.value.length){
    message.error('请选择'+orderSelectNum.value+'名技师');
    formBtnLoading.value = false;
    return false;
  }
  emit('reloadTechnician',checkedInfos.value.join(','));
  formBtnLoading.value = false;
  closeForm();
}


function closeForm() {
  showModal.value = false;
  loading.value = false;
  spaOrderId.value = 0;
  orderSelectNum.value = 0;
}

  // 重新加载表格数据
  function reloadTable() {
    actionRef.value?.reload();
  }

  defineExpose({
    openModal,
  });
</script>

<style lang="less"></style>
